<template>
  <div class="box">
    <ul class="table1">
      <li>
        <span><van-checkbox v-model="allCheck" @click="allCheckChenge" shape="square" icon-size=".5rem"></van-checkbox></span>
        <span style="justify-content: center;">ID</span>
        <span>标签</span>
      </li>
      <li v-for="(item, index) in pageData" :key="item.Id">
        <span><van-checkbox v-model="checks[index]" shape="square" icon-size=".5rem"></van-checkbox></span>
        <router-link tag="span" :to="'/Image/ImageContent/' + item.Id" class="color">{{item.Id}}</router-link>
        <span>
          {{item.RepoTags ? item.RepoTags[0] : '...'}}
        </span>
      </li>
    </ul>
    <van-pagination
      v-model="currentPage"
      :total-items="imageData.length"
      :show-page-size="pageNum"
      force-ellipses
      class="page1"
    />
  </div>
</template>

<script>
import Vue from 'vue'
import { Checkbox, Button, Pagination } from 'vant'

Vue.use(Checkbox)
Vue.use(Button)
Vue.use(Pagination)
export default {
  data () {
    return {
      currentPage: 1, // 当前页
      pageNum: 11,
      pageData: [], // 当前页的数据
      allCheck: false, // 全选
      checks: [], // 当前页面的子项数据是否选中
      checkItem: [] // 当前页面选中的数据
    }
  },
  props: ['imageData'],
  watch: {
    imageData: function () {
      this.currentPageData()
      this.currentChecks()
    },
    // checks改变时，算当前选中的数据，并传给父组件
    checks: function () {
      this.checkItem = []
      this.checks.map((item, index) => {
        if (item) {
          this.checkItem.push(this.pageData[index])
        }
      })
      this.$emit('checkItem', this.checkItem)
      if (this.checks.indexOf(false) === -1) {
        this.allCheck = true
      } else {
        this.allCheck = false
      }
    },
    // 监听分页数据
    currentPage: function () {
      this.currentPageData()
      this.currentChecks()
    }
  },
  mounted () {
    this.currentPageData()
    this.currentChecks()
  },
  methods: {
    // 全选框改变
    allCheckChenge () {
      this.checks = []
      if (this.allCheck) {
        this.pageData.map(item => {
          this.checks.push(true)
        })
      } else {
        this.pageData.map(item => {
          this.checks.push(false)
        })
      }
    },
    // 计算checks
    currentChecks () {
      this.checks = []
      this.pageData.map(item => {
        this.checks.push(false)
      })
    },
    // 算当前页面数据
    currentPageData () {
      this.pageData = this.imageData.slice(((this.currentPage - 1) * this.pageNum), this.currentPage * this.pageNum)
    }
  }
}
</script>

<style lang="scss" scope>
.table1{
  font-size: vw(28);
  border: 1px solid #f2f2f2;
  border-radius: vw(5);
  margin-bottom: vw(60);
  li{
    display: flex;
    justify-content: space-evenly;
    // align-items: center;
    border-bottom: 1px solid #f2f2f2;
    // padding: vw(21) 0;
    line-height: vw(76.6);
    // .button{
    //   width: vw(100);
    //   height: vw(45);
    //   padding: vw(5) vw(5);
    // }
    span{
      flex: 1;
      display: flex;
      justify-content: center;
      overflow: hidden; //超出部分隐藏
      text-overflow: ellipsis; //超出部分显示...
      white-space: nowrap; //文本强制一行显示
      margin: 0 vw(10);
      &:nth-child(1){
        flex: .3;
      }
      &:nth-child(2),
      &:nth-child(3){
        justify-content:flex-start;
      }
    }
  }
}
.page1{
  width: 92%;
  position: fixed;
  padding: vw(10);
  background: #fff;
  bottom: vw(138);
  font-size: vw(26) !important;
  margin-top: vw(15);
}
</style>
